<template>
  <div
    class="bg-login"
    ref="swiper"
    :class="path == '/login' ? 'login' : 'register'"
    :style="{ backgroundImage: 'url(' + loginBgs + ')' }"
  >
    <div class="top-box">
      <div class="logo">
        <router-link :to="{ name: 'index' }">
          <img :src="logoIn" alt="" />
        </router-link>
      </div>
    </div>
    <div class="web-name">
      <h2>{{ this.webName || '网站名称' }}</h2>
    </div>
    <div class="login">
      <router-view />
    </div>
  </div>
</template>
<script>
import webinfo from '@/mixins/webinfo.js'
export default {
  mixins: [webinfo],
  data() {
    return {
      path: this.$route.path,
    }
  },
  computed: {
    loginBgs() {
      return this.loginBg || require('@/assets/login/bg01.jpg')
    },
  },
  watch: {
    $route(to, from) {
      this.path = this.$route.path
    },
  },
}
</script>
<style lang="scss">
.bg-login {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url('../../assets/login/bg01.jpg') no-repeat center;
  background-size: cover;
  .top-box {
    width: 100%;
    height: 90px;
    background: #930b0b;
    box-shadow: 0 0 10px #aaa;
  }
  .logo {
    position: absolute;
    top: 16px;
    left: 160px;
    img {
      display: block;
      max-height: 60px;
    }
  }
  .web-name {
    position: absolute;
    top: 160px;
    left: 50%;
    margin-left: -350px;
    width: 700px;
    text-align: center;
    font-size: 20px;
    color: var(--colorH1);
    h2{
      text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
    }
  }
  .login {
    position: absolute;
    top: 240px;
    left: 50%;
    margin-left: -350px;
    width: 700px;
    padding: 50px 60px;
    box-sizing: border-box;
    background-size: 100% 100%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 #9d9c9c;
  }
}
.bg-login.login {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url('../../assets/login/bg01.jpg') no-repeat center;
  background-size: cover;
}
</style>